<template>  
  <el-menu @select="handleSelect">
      <Sub-menu-item :menus="data"></Sub-menu-item>
  </el-menu>      
  
</template>
<script lang="ts" setup>
import { useRouter } from 'vue-router';
import SubMenuItem from './Sub-menu-item.vue'
const router = useRouter()
const handleSelect = (...args: any[]) => {
  console.log(args)
  router.push({
    path:args[0]
  })
}

interface Tree {
[key: string]: any
}


const data: Tree[] = [
{
  path: 'Level one 1',
  label: 'Level one 1',
  children: [
    {
      path: 'Level two 1-1',
      label: 'Level two 1-1',
      children: [
        {
          path: '/index/test-page-layout',
          label: 'Level three 1-1-1',
        },
        {
          path: '/index/test-slot',
          label: 'Level three 1-1-2',
        },
      ],
    },
  ],
},
{
  path: 'Level one 2',
  label: 'Level one 2',
  children: [
    {
      path: '/index/test-props',
      label: 'Level two 2-1',
    },
    {
      path: '/index/test-vuex',
      label: 'Level two 2-2',
    },
  ],
},
{
  path: 'system-management',
  label: '系统管理',
  children: [
    {
      label: '菜单管理',
      path:'/index/menu-management'
    },
    {
      label: '用户管理',
      path:'/index/user'
    },
  ],
},
]
</script>
<style scoped lang="scss">
.menu-page {
  width:100vw;
  height:100vh;
  box-sizing: border-box;
  display:flex;
  .border-black {
      border:1px solid #000;
  }
  .left {
      width:350px;
      padding:10px;
  }
  .right {
      flex:1;
  }
}
</style>